<template>
  <view class="load-more-container">
    <!-- 加载中 -->
    <view v-if="status === 'loading'" class="load-more-status">
      <view class="loading-icon"></view>
      <text class="loading-text">{{ contentText.contentrefresh }}</text>
    </view>

    <!-- 没有更多 -->
    <view v-else-if="status === 'nomore'" class="load-more-status">
      <text class="nomore-text">{{ contentText.contentnomore }}</text>
    </view>

    <!-- 加载失败 -->
    <view v-else-if="status === 'error'" class="load-more-status error">
      <text class="error-text">加载失败，</text>
      <text class="retry-btn" @click="handleRetry">点击重试</text>
    </view>

    <!-- 默认状态 -->
    <view v-else-if="status === 'more'" class="load-more-status">
      <text class="more-text">{{ contentText.contentdown }}</text>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  // 加载状态：loading-加载中, nomore-没有更多, error-加载失败, more-可以加载更多
  status: {
    type: String,
    default: "more",
    validator: (value) =>
      ["loading", "nomore", "error", "more"].includes(value),
  },
  // 自定义文案
  contentText: {
    type: Object,
    default: () => ({
      contentdown: "上拉显示更多",
      contentrefresh: "正在加载...",
      contentnomore: "没有更多数据了",
    }),
  },
});

const emit = defineEmits(["retry"]);

// 重试
const handleRetry = () => {
  emit("retry");
};
</script>

<style lang="scss" scoped>
.load-more-container {
  width: 100%;
  padding: 30rpx 0;
}

.load-more-status {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 28rpx;
  gap: 12rpx;

  &.error {
    gap: 8rpx;
  }
}

.loading-icon {
  width: 32rpx;
  height: 32rpx;
  border: 4rpx solid #e5e5e5;
  border-top-color: #999;
  border-radius: 50%;
  animation: rotate 0.8s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-text,
.more-text,
.nomore-text {
  color: #999;
}

.error-text {
  color: #999;
}

.retry-btn {
  color: #ffbb00;
  text-decoration: underline;

  &:active {
    opacity: 0.7;
  }
}
</style>
